<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./ICR_style.css">



<body>
    <div class="box">
        <div class="leftBox"></div>
        <div class="rightBox"></div>
        <div class="main">
            <header>
                <div class="hImg"><img src="./img/logo (1).png" alt=""></div>
                <div class="hTitle">
                    <h2>ICR</h2>
                    <h3>International Cuisine Restaurant</h3>
                </div>

            </header>
            <nav>
                <a class="nav_a" href="./index.html">Home</a>
                <a class="nav_a" href="./Menu_details.html">Menu_details</a>
                <a class="nav_a" href="./Booking_info.html">Reservation Form</a>
                <a class="nav_a" href="./Contact_Details.html">Contact_Details</a>
                <a class="nav_a" href="./Gallery.html">Gallery</a>
            </nav>
            <div style="display: flex;">
                <!-- 框架版本下拉框 -->
                <!-- <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown Menu
                </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="./index.html">Home</a></li>
                        <li><a class="dropdown-item" href="./Menu_details.html">Menu_details</a></li>
                        <li><a class="dropdown-item" href="./Booking_info.html">Reservation Form</a></li>
                    </ul>
                </div> -->

                <!-- 原生下拉框 -->
                <select name="limit" id="select" onchange="getvalue(this.options[this.options.selectedIndex].value)">
                <option value ="">Dropdown Menu</option>
                <option value ="Home">Home</option>
                <option value ="Menu_details">Menu_details</option>
                <option value="Reservation Form">Reservation Form</option>
                <option value="Contact_Details">Contact_Details</option>
                <option value="Gallery">Gallery</option>
              </select>
            </div>

            <hr>

            <div class="row">
                <div class="col-9">
                    <div class="row">
                        <div class="col-6">
                            <article class="card mb-4">
                                <header class="card-header" style="flex-direction: column;">
                                    <div class="card-meta">
                                        <a href="#"><time class="timeago" datetime="2019-10-26 20:00" timeago-id="1">1 year ago</time></a> in <a href="#">Journey</a>
                                    </div>
                                    <a href="#">
                                        <h4 class="card-title">How can we sing about love?</h4>
                                    </a>
                                </header>
                                <a href="#">
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/22.jpg" alt="">
                                </a>
                                <div class="card-body">
                                    <p class="card-text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                                </div>
                            </article>
                            <article class="card mb-4">
                                <header class="card-header" style="flex-direction: column;">
                                    <div class="card-meta">
                                        <a href="#"><time class="timeago" datetime="2019-10-03 20:00" timeago-id="2">1 year ago</time></a> in <a href="#">Lifestyle</a>
                                    </div>
                                    <a href="#">
                                        <h4 class="card-title">Oh, I guess they have the blues</h4>
                                    </a>
                                </header>
                                <a href="#">
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/18.jpg
                                    " alt="">
                                </a>
                                <div class="card-body">
                                    <p class="card-text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                                </div>
                            </article>
                            <article class="card mb-4">
                                <header class="card-header" style="flex-direction: column;">
                                    <div class="card-meta">
                                        <a href="#"><time class="timeago" datetime="2019-07-16 20:00" timeago-id="3">2 years ago</time></a> in <a href="#">Work</a>
                                    </div>
                                    <a href="#">
                                        <h4 class="card-title">How can we, how can we sing about ourselves?</h4>
                                    </a>
                                </header>
                                <a href="#">
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/12.jpg" alt="">
                                </a>
                                <div class="card-body">
                                    <p class="card-text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                                </div>
                            </article>
                        </div>
                        <div class="col-6">
                            <article class="card mb-4">
                                <header class="card-header" style="flex-direction: column;">
                                    <div class="card-meta">
                                        <a href="#"><time class="timeago" datetime="2019-10-15 20:00" timeago-id="4">1 year ago</time></a> in <a href="#">Lifestyle</a>
                                    </div>
                                    <a href="#">
                                        <h4 class="card-title">The king is made of paper</h4>
                                    </a>
                                </header>
                                <a href="#">
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/5.jpg" alt="">
                                </a>
                                <div class="card-body">
                                    <p class="card-text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                                </div>
                            </article>
                            <article class="card mb-4">
                                <header class="card-header" style="flex-direction: column;">
                                    <div class="card-meta">
                                        <a href="#"><time class="timeago" datetime="2019-08-24 20:00" timeago-id="5">1 year ago</time></a> in <a href="#">Work</a>
                                    </div>
                                    <a href="#">
                                        <h4 class="card-title">Crying on the news</h4>
                                    </a>
                                </header>
                                <a href="#">
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/13.jpg" alt="">
                                </a>
                                <div class="card-body">
                                    <p class="card-text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                                </div>
                            </article>
                            <article class="card mb-4">
                                <header class="card-header" style="flex-direction: column;">
                                    <div class="card-meta">
                                        <a href="#"><time class="timeago" datetime="2019-05-08 20:00" timeago-id="6">2 years ago</time></a> in <a href="#">Journey</a>
                                    </div>
                                    <a href="#">
                                        <h4 class="card-title">How can you not sing about love?</h4>
                                    </a>
                                </header>
                                <a href="#">
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/1.jpg" alt="">
                                </a>
                                <div class="card-body">
                                    <p class="card-text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <aside class="sidebar">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h4 class="card-title">About</h4>
                                <p class="card-text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam <a href="#">semper libero</a>, sit amet adipiscing sem neque sed ipsum. </p>
                            </div>
                        </div>


                    </aside>

                    <aside class="sidebar sidebar-sticky">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h4 class="card-title">Tags</h4>
                                <a class="btn btn-light btn-sm mb-1" href="#">Journey</a>
                                <a class="btn btn-light btn-sm mb-1" href="#">Work</a>
                                <a class="btn btn-light btn-sm mb-1" href="#">Lifestype</a>
                                <a class="btn btn-light btn-sm mb-1" href="#">Photography</a>
                                <a class="btn btn-light btn-sm mb-1" href="#">Food &amp; Drinks</a>
                            </div>
                        </div>
                        <!-- /.card -->
                        <div class="card mb-4">
                            <div class="card-body">
                                <h4 class="card-title">Popular stories</h4>

                                <a href="#" class="d-inline-block">
                                    <h4 class="h6">The blind man</h4>
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/2.jpg" alt="">
                                </a>
                                <time class="timeago" datetime="2019-10-03 20:00" timeago-id="7">1 year ago</time> in Lifestyle

                                <a href="#" class="d-inline-block mt-3">
                                    <h4 class="h6">Crying on the news</h4>
                                    <img class="card-img" src="https://milo.bootlab.io/img/articles/3.jpg" alt="">
                                </a>
                                <time class="timeago" datetime="2019-07-16 20:00" timeago-id="8">2 years ago</time> in Work

                            </div>
                        </div>
                        <!-- /.card -->
                    </aside>
                </div>



            </div>

            <hr>
            <footer>
                <div class="fText">
                    <span>Copyright © 2021 二姨  </span>
                </div>
            </footer>
        </div>
    </div>
</body>
<script src="./ICR.js"></script>

</html>